<template>
  <div class="el-query-row">
    <div class="el-query-label" :style="label ? `width:${labelWidth}px;` : ''" v-if="label">{{label}}</div>
    <div class="el-query-content" :style="label ? `margin-left:${labelWidth}px;` : ''">
      <el-row :gutter="10" type="flex" style="flex-wrap: wrap;">
        <slot></slot>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'el-query-row',
  props: {
    label: {
      default: null,
      type: String
    },
    labelWidth: {
      default: 60,
      type: Number
    }
  }
}
</script>

<style lang="scss">
  @import "~@/assets/styles/mixin.scss";
  .el-query-row {
    margin-bottom: 15px;
    @include clearfix;
    .el-query-label {
      float: left;
      font-size: 14px;
      color: #606266;
      line-height: 28px;
      text-align: right;
      padding-right: 10px;
      vertical-align: middle;
      font-weight: 700;
    }
    .el-query-content {
      .el-form-item {
        margin-bottom: 0px;
      }
    }
  }
</style>